<template>
  <div id="freeze-coupon" >
    <c-title text="我的探币消费券"></c-title>
      <div class="top-lab">
        <van-tabs active="activeName" color="#FE5E56" title-active-color="#FE5E56" title-inactive-color="#00001C" line-width="15px">
          <van-tab title="待解锁" :name="1">
          </van-tab>
          <van-tab title="剩余解锁次数" :name="2" disabled></van-tab>
        </van-tabs>
        <div class="pop-line">
          <span :class="this.fun.getPhoneEnv() == 3 ? 'num-bubble-pc num-bubble' : 'num-bubble'">{{wait_unlock_num}}</span>
          <span :class="this.fun.getPhoneEnv() == 3 ? 'triangle-topleft-pc triangle-topleft' : 'triangle-topleft'"></span>
        </div>
        <div class="right-pop-line">
          <span :class="this.fun.getPhoneEnv() == 3 ? 'num-bubble-pc num-bubble' : 'num-bubble'">{{surplus_unlock_num}}</span>
          <span :class="this.fun.getPhoneEnv() == 3 ? 'triangle-topleft-pc triangle-topleft' : 'triangle-topleft'"></span>
        </div>
      </div>
      <div class="detail-box">
        <d-list :loading="loading" :finished="finished" @load="onLoad" >
          <div class="row-ls" v-for="(item,index) in freezeCouponData" :key="index">
            <div class="left-low">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/freeze_coupon/freeze_coupon.png" alt="">
              <template class="freeze-id">冻结券ID:{{item.id}}</template>
            </div>
            <div class="right-ls">
              <div class="time">解锁时间:{{item.unlock_time_str}}</div>
              <div class="num-day">每{{item.unlock_day}}天自动解锁一张</div>
            </div>
          </div>
        </d-list>
      </div>
  </div>
</template>
<script>
import index_controller from "./index_controller";

export default index_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.top-lab {
  position: relative;
  padding: 0.8rem 1.5rem 0.3rem 1.5rem;
  background: white;
  .pop-line {
    // position: relative;
    .num-bubble-pc {
      top: 0.48rem !important;
      left: 32.8% !important;
    }
    .triangle-topleft-pc {
      top: 1.5rem !important;
      left: 34% !important;
    }

    .num-bubble {
      position: absolute;
      top: 0.48rem;
      left: 32.3%;
      background: #F15353;
      color: #F3F3F3;
      padding: 0.1rem 0;
      border-radius: 2rem;
      width: 2.8rem;
      z-index: 1;
    }
    .triangle-topleft {
      width: 0;
      height: 0;
      border-top: 0.6rem solid #F15353;
      display: block;
      border-right: 1.8rem solid transparent;
      position: absolute;
      top: 1.4rem;
      left: 33.5%;
      border-radius: 0.2rem;
      z-index: 0;
    }
  }
  .right-pop-line {
    // position: relative;
    .num-bubble-pc {
      top: 0.48rem !important;
      right: 6.3% !important;
    }
    .triangle-topleft-pc {
      top: 1.5rem !important;
      right: 9.2% !important;
    }
    .num-bubble {
      position: absolute;
      top: 0.48rem;
      right: 7%;
      background: #F15353;
      color: #F3F3F3;
      padding: 0.1rem 0;
      border-radius: 2rem;
      width: 2.8rem;
      z-index: 1;
    }
    .triangle-topleft {
      width: 0;
      height: 0;
      border-top: 0.6rem solid #F15353;
      display: block;
      border-right: 1.8rem solid transparent;
      position: absolute;
      top: 1.4rem;
      right: 10.2%;
      border-radius: 0.2rem;
      z-index: 0;
    }
  }
}
.detail-box {
  padding: 0 0.6rem;
  .row-ls {
    margin-top: 0.6rem;
    padding: 0.55rem 1rem 0.6rem 1rem;
    border-radius: 0.4rem;
    background: white;
    display: flex;
    .left-low {
      display: flex;
      flex-direction: column;
      padding-right: 1.3rem;
      margin: 0 1.4rem 0 0.3rem;
      border-right: 1.2px dashed #E7E7E7;
      justify-content: center;
      align-items: center;
      font-size: 0.8rem;
      font-weight: 400;
      color: #AAAAB3;
      img {
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 0.2rem;
        margin-top: 0.35rem;
        margin-bottom: 0.5rem;
      }
      .freeze-id {
        // font-size: 0.8rem;
        // font-weight: 400;
        // color: #AAAAB3;
        // margin-top: 0.5rem;
        // margin-bottom: 0.3rem;
      }
    }
    .right-ls {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .time {
        font-size: 0.85rem;
        font-weight: 400;
        color: #3B3B4A;
        margin-top: 0.35rem;
      }
      .num-day {
        padding: 0.4rem 0.8rem;
        background: rgba(255, 238, 223, 0.9);
        border-radius: 0.2rem;
        font-size: 0.8rem;
        font-weight: 400;
        color: #FF9C43;
        text-align: left;
        margin-bottom: 0.3rem;
      }
    }
  }
}
</style>
